import styles from './card.module.css'
import { useLazyImage } from '@/hooks/useIntersectionObserver'

const ImageCard = (props) => {
    const {
        url,
        height,
        context
    } = props
    
    // 使用图片懒加载 hook
    const imgRef = useLazyImage(url);

    return (
        <div style={{ height }} className={styles.card}>
            <img ref={imgRef} data-src={url} className={styles.img} />
            <div className={styles.overview}>
                <h3>Overview</h3>
                {context}
            </div>
        </div>
    )
}

export default ImageCard